<div id="container">
<p id="description"></p>
<div id="sample"><span contenteditable="true">foobar</span></div>
</div>
<div id="console"></div>
<script src="../../../resources/js-test.js"></script>
<script>
description('Range objects should be updated after set innerHTML.');

function $(id) { return document.getElementById(id); }

var ranges = {};
function eventHandler(event) {
    if (ranges[event.type])
        return;
    ranges[event.type] = document.createRange();
    ranges[event.type].selectNodeContents(sample.firstChild.firstChild);
}

document.addEventListener('blur', eventHandler, true);
document.addEventListener('DOMNodeRemovedFromDocument', eventHandler, true);

$('sample').firstChild.focus();
$('sample').innerHTML = '';

shouldBe('ranges["blur"].startOffset', '0');
shouldBe('ranges["blur"].endOffset', '0');
shouldBe('ranges["DOMNodeRemovedFromDocument"].startOffset', '0');
shouldBe('ranges["DOMNodeRemovedFromDocument"].endOffset', '0');

if (window.testRunner)
    $('container').outerHTML = '';
</script>
